<template>
	<view class="sti_qrcode_page">
		<view class="sti_qrcode_box">
			<image v-if="info.my_prize_img" style="width: 100%;" :src="picUrl+info.my_prize_img" mode="widthFix">
			</image>
			<view class="sti_qrcode_bk_box">
				<image v-if="info.prize_img" class="qy_img" :src="picUrl+info.prize_img" mode="widthFix"></image>
				<view class="mt-10 f-13 f-w">{{info.prize_name}}</view>
				<image v-if="info.qr_code" class="qrcode_img" :src="picUrl+info.qr_code"
					:style="info.sign_status==1?'opacity: 0.2;':''"></image>
				<view class="f-13 mt-5">权益兑换码</view>
				<view v-if="info.qr_code_number" class="display_flex" style="justify-content: center;">
					<view class="duihuan_code">{{info.qr_code_number}}</view>
				</view>
			</view>
		</view>
		<view class="sti_qrcode_info_box">
			<view class="f-13 f-w text-c">兑换详情</view>
			<view class="sti_qrcode_info_cell">
				<view class="c-999999 f-11">经销商</view>
				<view class="f-12 mt-5">{{info.company_title}}</view>
			</view>
			<view class="sti_qrcode_info_cell">
				<view class="c-999999 f-11">经销商地址</view>
				<view class="f-12 mt-5">{{info.company_address}}</view>
			</view>
			<view class="sti_qrcode_info_cell">
				<view class="c-999999 f-11">经销商电话</view>
				<view class="f-12 mt-5">{{info.company_tel}}</view>
			</view>
		</view>
		<view class=""></view>
		<image v-if="info.bottom_img" class="sti_form_bottom_img" :src="picUrl+info.bottom_img" mode="widthFix"></image>
	</view>
</template>

<script>
	import {
		getStiActiveInfo,
	} from '@/api/motortime.js';
	let app = getApp()
	export default {
		data() {
			return {
				info: '',
				picUrl: app.globalData.picUrl,
				onlinePic: app.globalData.onlinePic,
				pdbottom: uni.getSystemInfoSync().safeAreaInsets.bottom + 80,
			};
		},
		onShow() {
			if (!uni.getStorageSync('access_token')) {
				uni.navigateTo({
					url: '/pages/login/login'
				})
			}
			if (uni.getStorageSync('onload')) {
				uni.showLoading({})
				this.getStiActiveInfo()
				uni.removeStorage({
					key: 'onload'
				})
			}
			var params = {
				event_code: 'sti宠粉活动',
				path: 'pages/sti/qrcode',
				event_id: '',
				title: '',
				source_page: 'sti宠粉活动-我的权益',
				value: '',
			}
			app.BurialPoint(params)
			if (uni.getStorageSync('register_channel')) {
				uni.removeStorage({
					key: 'register_channel'
				})
			}
		},
		onLoad() {
			if (uni.getStorageSync('access_token')) {
				uni.showLoading({})
				this.getStiActiveInfo()
			}
		},
		methods: {
			getStiActiveInfo() {
				getStiActiveInfo({
					huodong_version:2
				}).then(res => {
					if (res.state == 1) {
						this.info = res.data.info
						if (res.data.info.is_enroll == 0) {
							uni.navigateTo({
								url: './index'
							})
						} else {
							if (res.data.info.status != 1) {
								uni.navigateTo({
									url: './result'
								})
							}
						}
						uni.hideLoading()
						//is_enroll:,   是否提交  0 未提交  1 已提交
					} else {}
				})
			},
		},
		onPullDownRefresh() {
			this.getStiActiveInfo()
			uni.stopPullDownRefresh()
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #EEEEEE;
	}

	.sti_qrcode_page {
		position: relative;
		min-height: 100vh;
		padding-bottom: 200rpx;

		.sti_qrcode_box {
			padding: 47rpx;
			position: relative;
			text-align: center;

			.sti_qrcode_bk_img {
				width: 100%;

			}

			.sti_qrcode_bk_box {
				position: absolute;
				top: 0;
				left: 82rpx;
				right: 82rpx;
				z-index: 1;

				.qy_img {
					width: 100%;
					margin-top: 152rpx;
				}

				.qrcode_img {
					width: 170rpx;
					height: 170rpx;
					margin-top: 85rpx;
					border-radius: 40px;
				}

				.duihuan_code {
					width: 300rpx;
					font-size: 26rpx;
					font-weight: bold;
					padding: 20rpx 0;
					color: #ffffff;
					margin-top: 35rpx;
					border-radius: 8rpx;
					background-color: #C80F48;
				}
			}
		}

		.sti_qrcode_info_box {
			margin: 5rpx 47rpx 80rpx 47rpx;
			padding: 46rpx 30rpx;
			border-radius: 8rpx;
			background-color: #ffffff;

			.sti_qrcode_info_cell {
				padding: 29rpx 0;
				border-bottom: 1rpx solid #E9E9E9;
			}

			.sti_qrcode_info_cell:last-child {
				border-bottom: none;
				padding-bottom: 0;
			}
		}

		.sti_form_bottom_img {
			width: 100%;
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			z-index: -1;
		}
	}
</style>